<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>智农云枢系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
    <link rel="stylesheet" href="styles/login.css">
</head>
<style>/* 视频背景样式 */
    #video-background {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1; /* 视频设置在下面 */
        transform: translate(-50%, -50%);
    }
    </style>

<body>
    <div class="dynamic-background"></div>
    <video id="video-background" autoplay muted loop>
        <source src="./large_2x.mp4" type="video/mp4">
    </video>
    <div class="animated-icons left">
        <div class="icon-wrapper">
            <i class="fas fa-leaf fa-2x"></i>
        </div>
        <div class="icon-wrapper">
            <i class="fas fa-seedling fa-2x"></i>
        </div>
        <div class="icon-wrapper">
            <i class="fas fa-tree fa-2x"></i>
        </div>
    </div>

    <div class="container">
        <div id="login_box" class="glass-effect">
            <h2>智农云枢系统</h2>
            <div class="login-form">
                <form method="post">
                    <div class="input-group">
                        <i class="fas fa-user"></i>
                        <input type="text" name="username" id="usr" placeholder="请输入用户名" required />
                    </div>
                    <div class="input-group">
                        <i class="fas fa-lock"></i>
                        <input type="password" name="password" id="pwd" placeholder="请输入密码" required />
                    </div>
                    <button type="submit">登录</button>
                </form>
            </div>
        </div>

        <footer class="glass-effect">
            <p>&copy; 2024 智农云枢系统 - 绿水青山，智慧农业</p>
        </footer>
    </div>

    <div class="animated-icons right">
        <div class="icon-wrapper">
            <i class="fas fa-cloud-sun fa-2x"></i>
        </div>
        <div class="icon-wrapper">
            <i class="fas fa-water fa-2x"></i>
        </div>
        <div class="icon-wrapper">
            <i class="fas fa-mountain fa-2x"></i>
        </div>
    </div>

    <script>
        function sendPOSTRequest() {
            var xhr = new XMLHttpRequest();
            var url = "";
            var data = "username=" + encodeURIComponent(document.getElementById("usr").value) +
                      "&password=" + encodeURIComponent(document.getElementById("pwd").value);
            console.log("Request data: ", data);
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }

        function get_info() {
            var v = document.getElementsByName("data");
            var xhr = new XMLHttpRequest();
            var url = "";
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                    var val = xhr.responseText.split(" ");
                    for (let i = 0; i < v.length && i < val.length; i++) {
                        v[i].value = val[i];
                    }
                }
            };
            xhr.send("get");
        }
    </script>
</body>
</html>